<!-- 登录界面 -->
<template>
    <view class="container">
        <view class="center">
            <image class="img" src="@/static/login.svg" />
            <button class="login" @tap="login" hover-class="button-hover">微信授权一键登录</button>
            <view class="footer">
                <radio class="radio" value="同意" :checked="isAgree" color="#625dad" @tap="radioChange" />
                <text class="text">
                    我已阅读并同意<text class="highLight">《用户协议》</text>和<text class="highLight">《隐私政策》</text>
                </text>
            </view>
        </view>
    </view>

</template>
<script setup lang="ts">
import { API_getToken, API_getUserInfo } from '@/service/user';
import { ref } from 'vue';
import { useUserStore } from '@/store';
const isAgree = ref<boolean>(false);
const userStore = useUserStore();
const radioChange = () => {
    isAgree.value = !isAgree.value;
}
const login = () => {
    if (isAgree.value) {
        uni.login({
            //使用微信登录
            provider: 'weixin',
            success: async function (wxLoginCode) {
                // 登录凭证code
                let code = wxLoginCode.code;
                let result = await API_getToken({ code });
                //存储token //安全性问题后续考虑todo
                uni.setStorageSync("token", result.data);
                uni.showToast({ icon: 'success', title: '登陆成功' })
                setTimeout(() => {
                    uni.switchTab({ url: '/pages/my/my' })
                }, 500)

            }
        });
    } else {
        uni.showToast({ icon: 'none', title: '请先同意用户协议' })
    }
}
</script>
<style scoped lang="scss">
.container {
    margin: 300rpx auto;

    .center {
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
            height: 300rpx;
            margin-bottom: 40rpx;
        }

        .login {
            height: 80rpx;
            width: 70%;
            text-align: center;
            line-height: 80rpx;
            margin: 30rpx 20rpx;
            color: #fff;
            border-radius: 80rpx;
            font-size: 30rpx;
            background-color: $color-main;
        }

        .footer {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #aaa;

            .radio {
                transform: scale(0.7);
            }

            .highLight {
                color: $color-main;
            }
        }
    }

}
</style>
